<template>
  <FlipCard ref="flipCardRef" :style="contentStyle" :cardStyle="cardStyle">
    <FlipCardItem v-for="content in props.contents">
      <div class="content">{{ content }}</div>
    </FlipCardItem>
  </FlipCard>
</template>
<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  // 样式参数
  cardStyle: {
    type: Object,
    default: () => {
      return {
        fontColor: "#ccc", // 字体颜色
        backgroundColor: "#333", // 背景颜色
        dividerColor: "rgba(0, 0, 0, 0.4)", // 分割线颜色
      };
    },
  },
  // 缩放比例
  scale: {
    type: Number,
    default: 1,
  },
  // 数字
  contents: {
    type: Array,
    default: () => {
      return ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
    },
  },
});

/**
 * 翻转卡片引用
 */
const flipCardRef = ref(null);

/**
 * 当前数字卡片默认样式
 * 数字卡片这一层加入了缩放功能，会根据比例自动计算缩放后的尺寸
 * 再将缩放后的尺寸应用到内容卡片和底层的翻转卡片中
 * 没有采用transform: scale()属性是因为该属性实现的缩放功能效果不好，放大后存在锯齿
 */
const defaultStyle = {
  width: 60, // 卡片宽度
  height: 60, // 卡片高度
  dividerHeight: 1, // 分割线高度
  perspective: 180, // 透视距离
  fontSize: 40, // 字体大小
};

/**
 * 计算缩放后的尺寸
 * 按比例缩放功能方便用户通过滑块快速调整数字卡片大小，没必要手动设置具体的每个宽高属性
 * @param scale 缩放比例
 */
function calculateDimensions() {
  return {
    width: defaultStyle.width * props.scale,
    height: defaultStyle.height * props.scale,
    fontSize: defaultStyle.fontSize * props.scale,
    dividerHeight: defaultStyle.dividerHeight * props.scale,
    perspective: defaultStyle.perspective * props.scale,
  };
}

/**
 * 翻转卡片需要的样式
 */
const cardStyle = computed(() => {
  const dimensions = calculateDimensions();
  return {
    width: dimensions.width,
    height: dimensions.height,
    dividerHeight: dimensions.dividerHeight,
    perspective: dimensions.perspective,
    dividerColor: props.cardStyle.dividerColor,
  };
});

/**
 * 内容卡片的样式
 */
const contentStyle = computed(() => {
  const dimensions = calculateDimensions();
  return {
    "--content-card-width": dimensions.width + "px",
    "--content-card-height": dimensions.height + "px",
    "--content-card-font-size": dimensions.fontSize + "px",
    "--content-card-font-color": props.cardStyle.fontColor,
    "--content-card-background-color": props.cardStyle.backgroundColor,
    "--content-card-divider-color": props.cardStyle.dividerColor,
  };
});

// 暴露方法
defineExpose({
  flip: () => {
    flipCardRef.value.flip();
  },
  flipByIndex: (...args) => {
    flipCardRef.value.flipByIndex(...args);
  },
});
</script>
<style scoped lang="scss">
.content {
  -webkit-user-select: none; //禁止选择
  width: var(--content-card-width);
  height: var(--content-card-height);
  color: var(--content-card-font-color);
  font-size: var(--content-card-font-size);
  font-weight: bold;
  text-align: center;
  line-height: var(--content-card-height); /* 行高=容器高度，确保数字居中 */
  background-color: var(--content-card-background-color);
}
</style>
